<template>
  <div>
    <div>
      <input />
    </div>
    <div class="right-menu" ref="rightMenu" @scroll="handleScroll">
      <ul>
        <li v-for="child in arr" :key="child.id">
          {{ child }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { bus } from '@/main.js';
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'right',
  mixins: [], //混入
  components: {}, //组件
  props: {
    arr: {
      type: [Array],
      default: function() {
        return [];
      },
    },
    // selectedChildren: {
    //   type: [Array],
    //   default: function() {
    //     return [];
    //   },
    // },
    // selectedGrandchild: Object,
    // setSelectedGrandchild: Function,
  },
  data() {
    return {};
  },
  computed: {
    ...mapState([]),
  },
  methods: {
    // selectGrandchild(grandchild) {
    //   this.setSelectedGrandchild(grandchild);
    // },
    handleScroll() {
      // Handle scroll if needed
    },
  },
};
</script>

<style scoped>
.right-menu {
  height: 100%;
  overflow-y: auto;
}
</style>
